<template>
	<view class="page">
		<view class="swiper">
			<swiper class="s_swiper" :circular="true" :autoplay="true" :interval="5000" @change="swiperChange">
				<swiper-item class="s_swiper_item" v-for="item in data.imgs" @click="prevImage(current)">
					<image class="s_swiper_image" :src="item" />
				</swiper-item>
			</swiper>
			<view class="indicator">
				<text>{{current}}/{{data.imgs.length}}</text>
			</view>
		</view>
		<view class="content">
			<view class="one">
				<view class="price">
					<view class="money">
						<view>到手价</view>
						<view>
							<text class="new bold"><text>￥</text>{{data.price}}</text>
							<text class="old">￥{{data.price}}</text>
						</view>
					</view>
					<view class="back after">
						<view>
							<view>预估下单返</view>
							<view class="bold"><text>￥</text>{{data.cosFee}}</view>
						</view>
					</view>
					<view class="sales after">
						<view>
							<view>月销</view>
							<view>{{data.sales}}</view>
						</view>
					</view>
				</view>
				<view class="title">
					<view class="tag tag_red" v-if="bigcate==1">拼多多</view>
					<view class="tag tag_black" v-if="bigcate==2">抖音</view>
					<text>{{data.title}}</text>
				</view>
				<view class="coupon" v-if="data.couponPrice>0">
					<image src="/static/coupon.png" class="bg"></image>
					<view class="info">
						<view class="c_money">￥{{data.couponPrice}}</view>
						<view class="flex1">
							<view>专属优惠券</view>
							<view>2024.02.02-2024.03.02</view>
						</view>
						<view>立即领券</view>
					</view>
				</view>
			</view>
			<view class="two">
				<image src="/static/business/set/7.png" mode="widthFix"></image>
				<text>{{data.shopName}}</text>
			</view>
			<view class="detail">
				<view class="sub">商品详情</view>
				<image class="s_swiper_image" mode="widthFix" :src="item" v-for="item in data.imgs"/>
			</view>
		</view>
		<view class="buttons">
			<view class="button" @click="share" v-if="isShow">
				<view>分享奖</view>
				<view>￥{{data.cosFee}}</view>
			</view>
			<view class="button go" :class="{'w100':!isShow}" @click="goBuy">
				<view>下单省</view>
				<view>￥{{data.cosFee}}</view>
			</view>
		</view>
		<uni-popup ref="popup" type="bottom" background-color="#fff">
			<view class="p_list">
				<button class="p_item" open-type="share">
					<image src="/static/wx.png"></image>
					<view>微信好友</view>
				</button>
				<view class="p_item" @click="sharePYQ">
					<image src="/static/pengyouquan.png"></image>
					<view>分享朋友圈</view>
				</view>
			</view>
		</uni-popup>
		<uni-popup ref="alertDialog" type="center">
			<view class="buyAlert">
				<view class="tit">复制成功</view>
				<view class="link">{{link}}</view>
				<button @click="goCopy">复制这条信息，打开dou音</button>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				current: 1,
				id: 0,
				data: [],
				bigcate: 1,
				link: '',
				linkinfo: [],
				code: 200,
				isShow: false,
			};
		},
		onLoad(option){
			this.id = option.id;
			this.bigcate = option.type;
			this.getDetail();
			if(uni.getStorageSync('level')[4]||uni.getStorageSync('level')[5]||uni.getStorageSync('level')[6]||uni.getStorageSync('level')[8]){
				this.isShow = true;
			}
		},		
		methods: {
			goCopy(){
				let that = this;
				uni.setClipboardData({
					data: that.link,
					success: function () {
						that.$refs.alertDialog.close()
					}
				});
			},
			goBuy(){
				let that = this;
				if(that.bigcate==1){
					uni.navigateToMiniProgram({
					  appId: that.linkinfo.app_id,  //跳转的小程序的aooId
					  path:that.linkinfo.page_path, //如果这里不填，默认是跳转到对方小程序的主页面
					  success(res) {
					    // 打开成功
					  }
					})
				}else if(that.bigcate ==2){
					uni.setClipboardData({
						data: that.link,
						success: function () {
							that.$refs.alertDialog.open()
						}
					});
				}
			},
			sharePYQ(){
				let that = this;
				if(that.code == 200){
					uni.setClipboardData({
						data: that.link,
						success: function () {
							that.$refs.popup.close()
						}
					});
				}else if(that.code == 30004){
					console.log(30004)
					uni.showModal({
						title: '提示',
						content: '未授权无法分享，是否现在去授权？',
						success: function (res) {
							that.$refs.popup.close();
							if (res.confirm) {
								uni.navigateToMiniProgram({
								  appId: that.linkinfo.app_id,  //跳转的小程序的aooId
								  path:that.linkinfo.page_path, //如果这里不填，默认是跳转到对方小程序的主页面
								  success(res) {
								    // 打开成功
								  }
								})
							} else if (res.cancel) {
								console.log('用户点击取消');
							}
						}
					});
				}
			},
			onShareAppMessage() {
				return {
					title: this.data.title,
					path: '/pages/taobao/detail?id='+this.data.id+'&type='+this.bigcate
				}
			},
			share(){
				this.$refs.popup.open()
			},
			getLink(){
				let php = '';
				let obj = {};
				if(this.bigcate==1){
					php = "duoduo";
					obj = {
						id: this.data.id,
						searchId: this.data.id
					}
					this.$axios('index/glink','POST',php,obj).then(res=>{
						this.code = res.data.code;
						this.linkinfo = res.data.data.we_app_info;
						if(res.data.code==200){
							this.link = res.data.data.we_app_web_view_short_url;
						}
					})
				}else if (this.bigcate==2){
					php = "douyin";
					obj = {
						url: this.data.detailUrl
					}
					this.$axios('index/glink','POST',php,obj).then(res=>{
						this.link = res.data.data.dy_password;
					})
				}
			},
			getDetail(){
				let php = '';
				if(this.bigcate==1){
					php = "duoduo";
				}else if (this.bigcate==2){
					php = "douyin";
				}
				this.$axios('index/info','POST',php,{
					id: this.id
				}).then(res=>{
					if(res.data.code==200){
						this.data = res.data.data;
						uni.setNavigationBarTitle({
							title: this.data.title
						})
						this.getLink();
					}
				})
			},
			prevImage(v) {
				uni.previewImage({
					current: v - 1,
					urls: this.data.imgs
				})
			},
			swiperChange(e) {
				var that = this;
				that.current = e.detail.current + 1;
			}
		}
	}
</script>

<style lang="scss" scoped>
.page{
	background: #f4f4f4;
}
.swiper{
	position: relative;
	.s_swiper{
		height: 700rpx;
		width: 100%;
		.s_swiper_image {
			height: 100%;
			width: 100%;
			position: relative;
		}
		.s_swiper_item {
			position: relative;
		}
	}
	.indicator {
		background: rgba(97, 88, 90, 0.5);
		border-radius: 4rpx;
		color: #fff;
		font-size: 26rpx;
		padding: 6rpx 16rpx;
		position: absolute;
		right: 40rpx;
		bottom: 20rpx;
	}
}
.content{
	padding: 10rpx 20rpx 220rpx;
	.bold{
		font-weight: bold;
		font-size: 36rpx;
		margin-top: -10rpx;
		text{
			font-size: 26rpx;
		}
	}
	.one{
		border-radius: 5rpx;
		background: #fff;
		padding: 20rpx;
		margin-top: 10rpx;
		.price {
			line-height: 2;
			display: flex;
			justify-content: space-between;
			align-items: center;
			.money{
				.new{
					margin-right: 10rpx;
					display: inline-block;
				}
				.old{
					text-decoration: line-through;
					color: #999;
				}
			}
			.back{
				color: #ff3333;
			}
			.sales{
				color: #969696;
			}
			.after{
				display: flex;
				align-items: center;
				&::before{
					content: '';
					width: 2rpx;
					height: 70rpx;
					background: #f4f4f4;
					display: block;
					margin-right: 20rpx;
				}
			}
		}
		.title{
			line-height: 1.4;
			font-size: 34rpx;
			margin-top: 8rpx;
			.tag{
				border-radius: 5rpx;
				color: #fff;
				font-size: 16rpx;
				float: left;
				margin-top: 7rpx;
				width: 56rpx;
				height: 34rpx;
				text-align: center;
				line-height: 34rpx;
				margin-right: 10rpx;
			}
			.tag_red{
				background: #f40009;
			}
			.tag_black{
				background: #141414;
			}
		}
		.coupon{
			position: relative;
			height: 140rpx;
			margin-top: 30rpx;
			.bg{
				position: absolute;
				left: 0;
				top: 0;
				width: 100%;
				height: 100%;
			}
			.info{
				width: 100%;
				height: 100%;
				padding: 0 40rpx 0 25rpx;
				position: absolute;
				display: flex;
				justify-content: space-between;
				color: #ff3333;
				font-size: 30rpx;
				align-items: center;
				line-height: 1.6;
				.c_money{
					font-weight: bold;
					font-size: 34rpx;
					margin-right: 38rpx;
				}
				.flex1{
					flex: 1;
					font-size: 28rpx;
				}
			}
		}
	}
	.two{
		border-radius: 5rpx;
		display: flex;
		align-items: center;
		background: #fff;
		margin-top: 15rpx;
		padding: 20rpx;
		image{
			width: 30rpx;
			margin-right: 20rpx;
		}
	}
	.detail{
		padding: 35rpx 0 0;
		.sub{
			display: flex;
			align-items: center;
			justify-content: center;
			margin-bottom: 20rpx;
			&::after,
			&::before{
				content: '';
				width: 50rpx;
				height: 3rpx;
				background: #333;
				display: block;
				margin: 0 20rpx;
			}
		}
		image{
			width: 100%;
		}
	}
}
.buttons{
	position: fixed;
	bottom: 0;
	background: #fff;
	width: 100%;
	padding: 20rpx 20rpx 30rpx;
	display: flex;
	justify-content: space-between;
	.button{
		border: 1rpx solid #d4d4d4;
		text-align: center;
		padding: 8rpx 0;
		width: 49%;
		border-radius: 3rpx;
	}
	.go{
		background: $bg-color;
		color: #fff;
		border: 1rpx solid $bg-color;
	}
	.w100{
		width: 100%;
	}
}
.p_list{
	display: flex;
	padding: 30rpx;
	text-align: center;
	.p_item{
		margin-right: 30rpx;
		font-size: 24rpx;
		color: #646464;
		margin-left: 0;
		background: none;
		line-height: 1;
		&::after{
			border: none;
		}
		image{
			width: 100rpx;
			height: 100rpx;
			margin-bottom: 10rpx;
		}
	}
}
.buyAlert{
	width: 80%;
	border-radius: 15rpx;
	text-align: center;
	background-color: #fff;
	padding: 40rpx 30rpx;
	margin: 0 auto;
	.tit{
		font-size: 32rpx;
		margin-bottom: 20rpx;
	}
	.link{
		background: #f4f4f4;
		padding: 60rpx 30rpx;
		margin-bottom: 30rpx;
	}
	button{
		font-size: 26rpx;
		background: $bg-color;
		color: #fff;
		&::after{
			border: none;
		}
	}
}
</style>
